<template>
	<div class="tab">
			<router-link to="/films" active-class="tabItemActive" class="tabItem">
				<div><i class="iconfont icon-ziyuan" /></div>
				<div>电影</div>
			</router-link>
			<router-link to="/cinemas" active-class="tabItemActive" class="tabItem">
				<div><i class="iconfont icon-yingyuan" /></div>
				<div>影院</div>
			</router-link>
			<router-link to="/main" active-class="tabItemActive" class="tabItem">
				<div><i class="iconfont icon-wode" /></div>
				<div>我的</div>
			</router-link>
	</div>
</template>

<script>
export default {
	props: {
		title: {},
	},
}
</script>

<style lang="less" scoped>
.tab {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #ffffff;
	.tabItem {
		flex: 1;
		text-align: center;
		color: #797d82;
		font-size: 15px;
		font-weight: 600;
		text-decoration: none;
	}
	.tabItemActive {
		color: #ff5f16;
	}
}
</style>
